<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>待办事项列表</title>
    <style>
        .is-complete {
            text-decoration: line-through;
        }
        table{
            border-collapse: collapse;
            border: 1px dotted #ccc;
        }

        td,th{
            border:1px dotted #ccc;
        }
    </style>
</head>
<body>
<div style = "display: flex; justify-content: flex-end;">
    当前用户名:${username!""}　　|　　<a href="/logout">退出登录</a>
</div>
<form action="/todo/save" method="post">
    <div class="field">
        <label for = "content">内容</label>
        <input type="text" name="content" placeholder="请输入待办事项内容" required/>
        <select name="contenttype"  placeholder="请选择待办事项内容类型" required>
            <option value="1">学习</option>
            <option value="2">生活</option>
            <option value="3">工作</option>
            <option value="4">娱乐</option>
            <option value="5">其他</option>
        </select>
        <input type="submit" value="新建">
    </div>
</form>
<table>
    <tr>
        <th>编号</th>
        <th>内容</th>
        <th>内容类型</th>
        <th>完成情况</th>
        <th>操作1</th>
        <th>操作2</th>
        <th>操作3</th>
        <th>创建时间</th>
        <th>更新时间</th>
    </tr>
    <#list todoList as todo>
        <tr>
            <td>${todo.id}</td>
            <td <#if (todo.complete)>class="is-complete"</#if>>${(todo.content)!""}</td>
            <td>${todo.contenttype}</td>
           <td><input type="checkbox" ${todo.complete?string('checked','')} onchange="window.location.href='/todo/check?id=${todo.id}'"></td>
            <td><a href="/todo/check?id=${todo.id}">☑切换</a></td>
            <td><a href="/todo/edit?id=${todo.id}">✒编辑</a></td>
            <td><a href="/todo/delete?id=${todo.id}">❌删除</a></td>
            <td>
                <#if todo.createAt??>
                    ${todo.createAt}
                <#else>
                </#if>
            </td>
            <td>
                <#if todo.updateAt??>
                    ${todo.updateAt}
                <#else>
                </#if>
            </td>

        </tr>
    </#list>
    <tr><td><a href="/todo/list?pre=1">上一页</a></td><td><a href="/todo/list?next=1">下一页</a></td></tr>
</table>
</body>
</html>